Ext.onReady(function(){
	////// user grid
	var store = new Ext.data.Store({
    	url: 'user.do?action=query',
    	reader: new Ext.data.JsonReader({
    		root: 'content',
    		totalProperty: 'total',
    		id: 'id',
    		fields: [
	           {name: 'id'},
	           {name: 'userId'},
	           {name: 'name'},
	           {name: 'email'}
	        ]
    	})
        
    });
    
	var grid = new Ext.grid.EditorGridPanel({
		id: 'userGrid',
//    	renderTo: 'user-grid-div',
		region:'center',
		margins:'0 5 5 5',
        store: store,
        columns: [
            {header: "id", width: 200, dataIndex: 'id'},
            {header: "userId", width: 100, dataIndex: 'userId'},
            {header: "name", width: 100, editor: new Ext.form.TextField(), dataIndex: 'name'},
            {header: "email", width: 250, editor: new Ext.form.TextField(), width: 150, dataIndex: 'email'}
        ],
        stripeRows: true,
        title: 'Users',
	        sm: new Ext.grid.RowSelectionModel(),
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            paramNames: {start: 'start', limit: 'limit', total: 'total'}
        }),
        listeners: {
//        	'rowclick': function(grid, rowIndex, e) {
//        		//alert('you click ' + rowIndex);
//        	}
        }
    });
    
    var headerPanel = new Ext.Panel({
    	border: false,
        layout:'anchor',
        region:'north',
        height:60,
        items: [
	        new Ext.Toolbar({
	            items:[ ' ', 
				new Ext.Button({
					id: 'newBtn',
					text: 'New'
				}), new Ext.Button({
					id: 'editBtn',
					text: 'Edit'
				}), new Ext.Button({
					id: 'delBtn',
					text: 'Delete'
				})
				]
        })]
    });
    
    var viewport = new Ext.Viewport({
		layout:'border',
        items:[headerPanel, grid]
	});
    
    store.load({params:{start:0, limit:25}});
    
    var userFormPanel = new Ext.FormPanel({
//    	title: 'User Form',
		url:'user.do?action=save',
		baseParams: {'type': ''},
		bodyStyle:'padding:5px 5px 0',
//		border: false,
//		anchor: '10',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',
        labelWidth: 75, // label settings here cascade unless overridden
    	items: [{
                fieldLabel: 'ID',
                name: 'userId',
                allowBlank:false
            },{
                fieldLabel: 'Name',
                name: 'name'
            },{
                fieldLabel: 'Password',
                name: 'password',
                inputType: 'password'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }
        ],

        buttons: [{
            text: 'Save',
            listeners: {
            	'click': function(button, e) {
            		userFormPanel.getForm().submit({
            			success: function() {
            				win.hide();
            				store.load();
            			},
            			failure: function() {
            				Ext.Msg.alert("Error", "save failure..");
            			}
            		});
            	}
            }
        },{
            text: 'Cancel',
            listeners: {
            	'click': function(button, e) {
            		win.hide();
            	}
            }
        }]
    });
    var win = new Ext.Window({
		title: 'User Form',
		closeAction: 'hide',
		layout: 'anchor',
//        width: 380,
//		bodyStyle:'padding:5px 5px 0',
    	items: userFormPanel
    });
    
    var form = userFormPanel;
    Ext.get('newBtn').on('click', function(){
    	form.baseParams.type = 'new';
		win.show(this);
    	form.find('name', 'userId')[0].setRawValue();
    	form.find('name', 'name')[0].setRawValue();
    	form.find('name', 'email')[0].setRawValue();
    	form.find('name', 'userId')[0].getEl().dom.readOnly = false;
    });
    Ext.get('editBtn').on('click', function(){
    	var record = Ext.getCmp('userGrid').getSelectionModel().getSelected();
		if (!record) {
			alert('no record selcted!');
			return ;
		}
    	form.baseParams.type = 'edit';
		win.show(this);
    	userIdField = form.find('name', 'userId')[0];
    	userIdField.setValue(record.data.userId);
    	userIdField.getEl().dom.readOnly = true;
    	form.find('name', 'name')[0].setValue(record.data.name);
    	form.find('name', 'email')[0].setValue(record.data.email);
    });
    Ext.get('delBtn').on('click', function(){
		var record = Ext.getCmp('userGrid').getSelectionModel().getSelected();
		if (!record) {
			alert('no record selcted!');
			return ;
		}
//		alert('delete user.id: ' + record.data.id);
    });
    
});